<!--生产商编辑-->
<template>
  <div class="editcontainer">
    <el-dialog
      :title="titleMap[edittitle]"
      :visible.sync="vis"
      @close="closeDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="600px"
    >
     <el-scrollbar style="height: 100%;">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="生产商名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="生产商地址" prop="address">
          <el-input v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item label="联系人名称" prop="contact_name">
          <el-input v-model="ruleForm.contact_name"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话" prop="contact_phone">
          <el-input v-model="ruleForm.contact_phone"></el-input>
        </el-form-item>
        <el-form-item label="联系人邮箱" prop="contact_email">
          <el-input v-model="ruleForm.contact_email"></el-input>
        </el-form-item>
      </el-form>
     </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <button
          @click="submitForm('ruleForm')"
          class="dialogbutton confim"
          v-if="edittitle=='addData' "
        >确 定</button>
        <button @click="editForm('ruleForm')" class="dialogbutton confim" v-else>提 交</button>
        <button @click="cancle" class="dialogbutton calce">取 消</button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      vis: false,
      ruleForm: {
        name: "",
        address: "",
        contact_name: "",
        contact_phone: "",
        contact_email: ""
      },
      rules: {
        name: [
          { required: true, message: "请输入制造商名称", trigger: "blur" }
        ],
        address: [
          { required: true, message: "请输入制造商地址", trigger: "blur" }
        ],
        contact_name: [
          { required: true, message: "请输入联系人名称", trigger: "blur" }
        ],
        contact_phone: [
          {
            required: true,
            pattern: /^1[34578]\d{9}$/,
            message: "请输入正确的联系电话",
            trigger: "blur"
          }
        ],
        contact_email: [
          {
            required: true, //是否必填
            message: "请输入联系人邮箱", //错误提示信息
            trigger: "blur" //检验方式（blur为鼠标点击其他地方，）
          },
          {
            type: "email", //要检验的类型（number，email，date等）
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ]
      },
      titleMap: {
        addData: "添加",
        updateData: "编辑"
      }
    };
  },
  props: {
    dialogFormVisible: Boolean,
    edittitle: String,
    roleform: Object
  },
  watch: {
    dialogFormVisible(newValue, oldValue) {
      this.vis = newValue;
    },
    roleform(newValue, oldValue) {
      this.ruleForm = newValue;
    }
  },
  methods: {
    cancle() {
      this.$emit("backtable");
    },
    //关闭弹框
    closeDialog() {
      this.$emit("backtable", true);
    },
    //添加
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$emit("chirldSave", this.ruleForm);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //编辑
    editForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$emit("chirldEdit", this.ruleForm);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
/deep/.el-dialog,
/deep/ .el-pager li {
  background: url(../../../../static/image/dialog_top.png) no-repeat;
  background-size: 100%100%;
  // box-shadow: 0px 0px 25px 0px rgba(68, 140, 232, 0.7) inset;
  color: #fff;
}
@import "../../../assets/css/dialog";
</style>